<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <title>demo</title>  
    <script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>  
    <script>  
        $(document).ready(function(){  
            var len = $(".num li").length;  
            var index = 0;  
            var startRollOne;  
  
            $(".num li").mouseover(function(){  
                index=$(".num li").index(this);  
                showImg(index);  
            }).eq(0).mouseover();  
  
            $(".box").hover(function () {  
                clearInterval(startRollOne);  
            }, function () {  
                startRollOne=setInterval(function () {  
                    showImg(index);  
                    index++;  
                    if(index==len){  
                        index=0;  
                    }  
                },2000);  
            }).trigger("mouseleave");  
  
            function showImg(index){  
                $(".picBox").stop(true,false).animate({  
                    marginLeft:-200*index+"px"  
                },1000);  
                $(".num li").removeClass("on").eq(index).addClass("on");  
            }  
  
        });  
    </script>  
    <style>  
        .box{  
            width: 200px;  
            height: 260px;  
            margin: 160px auto;  
            overflow: hidden;  
            position: relative;  
        }  
        .box p{  
            text-align: center;  
        }  
        .picBox{  
            margin: 0px;  
            padding: 0px;  
            list-style: none;  
            width: 1500px;  
            position: absolute;  
        }  
        .picBox:hover{  
            cursor: pointer;  
        }  
        .picBox li{  
            float: left;  
        }  
        .picBox img{  
            width: 200px;  
            height: 240px;  
        }  
        .num {  
            list-style: none;  
            position: absolute;  
            bottom: 1px;  
            right: 10px;  
        }  
        .num li{  
            text-align: center;  
            width: 15px;  
            height:15px;  
            background-color: white;  
            opacity: 1;  
            line-height: 18px;  
            float: left;  
            border: red solid 1px;  
            margin-left: 2px;  
            font-size: 15px;  
        }  
        .num li.on{  
            text-align: center;  
            width: 20px;  
            height:20px;  
            background-color: red;  
            opacity: 1;  
            font-size: 18px;  
            line-height: 20px;  
            float: left;  
            border: red solid 1px;  
            margin-left: 2px;  
        }  
    </style>  
</head>  
<body>  
<div class="box">  
    <p> 图片轮播</p>  
    <ul class="picBox">  
        <li><img src="./yaoshi_1.png" /></li>  
        <li><img src="./yaoshi_2.png" /></li>  
        <li><img src="./yaoshi_3.png" /></li>  
        <li><img src="./yaoshi_4.png" /></li>    
    </ul>  
    <ul class="num">  
        <li class="on">1</li>  
        <li>2</li>  
        <li>3</li>  
        <li>4</li>  
        
    </ul>  
</div>  
</body>  
</html>  